/* @import "./fonts-manrope.css"; */
@tailwind base;
@tailwind components;
@tailwind utilities;

:root{
  --bg: #0b1020;
  --fg: #e6e8ef;
  --muted: #a8b0c3;
  --surface: #151a2e;
  --border: #242a42;
  --accent: #4f46e5;
}
.theme-light{
  --bg: #ffffff;
  --fg: #0b1020;
  --muted: #5a6278;
  --surface: #f6f7fb;
  --border: #e6e8ef;
  --accent: #4f46e5;
}
html, body { width: 375px;height: 480px; }
body{
  background: var(--bg);
  color: var(--fg);
  max-width: 100vw;
  /* font-family: "Manrope", Inter, Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.app{ display:flex; flex-direction:column; height: 600px; max-height: 100vh; }
.app__header{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border);
}
.app__brand{ font-weight:600; }
.app__controls{ display:flex; gap:8px; align-items:center; }
.btn{ background:var(--surface); color:var(--fg); border:1px solid var(--border); padding:6px 8px; border-radius:8px; cursor:pointer; }
.btn:hover{ border-color: var(--accent); }
.select{ background:var(--surface); color:var(--fg); border:1px solid var(--border); padding:6px 8px; border-radius:8px; }

.tabs{ display:flex; overflow:auto; gap:6px; padding:8px; border-bottom:1px solid var(--border); }
.tab{ background:transparent; color:var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius:999px; cursor:pointer; }
.tab.is-active{ color:var(--fg); border-color: var(--accent); }

.panes{ flex:1; overflow:auto; padding:12px; }
.pane{ display:none; }
.pane.is-active{ display:block; }

/* Hide horizontal scrollbar for tab containers while preserving scroll */
.hide-scrollbar{ -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar{ display: none; }

/* Basic layouts for widgets */
.grid{ display:grid; gap:8px; }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.display{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; text-align:right; min-height:48px; font-size:18px; }
.key{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; text-align:center; cursor:pointer; }
.key.primary{ background: var(--accent); color: white; border-color: var(--accent); }
.row{ display:flex; gap:8px; align-items:center; }
label{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
input, select{ background:var(--surface); color:var(--fg); border:1px solid var(--border); padding:6px 8px; border-radius:8px; }

/* Table cell input styling for UnitPrice */
.cell-input .el-input__wrapper{ box-shadow:none !important; background:transparent; }
.cell-input .el-input__wrapper{ border:none !important; padding:0 4px; }
.cell-input .el-input-number__decrease,.cell-input .el-input-number__increase{ display:none; }
.cell-input input{ text-align:right; }

/* Responsive */
@media (max-width: 375px){
  body{ width: 100vw; }
  .tabs{ flex-wrap: wrap; }
}

/* App gradient background wrapper */
.app-gradient{
  background: linear-gradient(180deg, #cfe3ff 0%, #bcd7ff 45%, #f4f8ff 100%) !important;
}

/* Favorites wrap: use right margin between adjacent buttons instead of left */
.fav-wrap .el-button + .el-button{
  margin-left: 0 !important;
}


/* Pill tabs style for top radio group */
.pill-tabs{ gap:8px; }
.pill-tabs .el-radio-button{ margin:0; }
.pill-tabs .el-radio-button__inner{
  border-radius:9999px !important;
  border:1px solid rgba(36,42,66,0.22);
  background: #D6E6FF;
  padding:6px 14px;
  line-height: 20px;
  color: var(--fg);
  transition: all .2s ease;
  font-weight: 600;
}
.pill-tabs .el-radio-button__inner:hover{
  border-color: #3193E4;
}
.pill-tabs .el-radio-button.is-active .el-radio-button__inner{
  background: #ffffff;
  color: var(--fg);
  border-color: rgba(31,76,255,0.55) !important;
  box-shadow: 0 2px 8px rgba(31,76,255,0.14);
  font-weight: 700;
}
/* Mark favorite: star becomes yellow */
.pill-tabs .el-radio-button__inner .el-icon.is-fav{
  color: #FFC107 !important;
}
.fav-wrap .el-button .el-icon{
  color: #FFC107;
}

/* Favorites: make buttons look like pill tabs */
.fav-wrap .el-button{
  background: #D6E6FF !important;
  color: var(--fg) !important;
  border: 1px solid rgba(36,42,66,0.22) !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  line-height: 20px;
  font-weight: 600;
  box-shadow: none !important;
}
.fav-wrap .el-button:hover{
  border-color: #3193E4 !important;
}

/* Force override Element Plus default checked style (blue) */
.pill-tabs .el-radio-button__original-radio:checked + .el-radio-button__inner{
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: var(--fg) !important;
  border-color: #E3EDF5 !important;
  box-shadow: 0 2px 8px rgba(31,76,255,0.14) !important;
}

